<template>
  <div style="height: 100%">
    <el-table :data="dataList" ref="singleTable" height="500" v-loading="loading" @row-click="rowClick" row-class-name="row-cursor" highlight-current-row>
      <el-table-column width="60" type="index" label="序号" ></el-table-column>
      <el-table-column prop="startTime" label="开始时间" show-overflow-tooltip>
        <template slot-scope="scope">{{$time(scope.row.startTime)}}</template>
      </el-table-column>
      <el-table-column label="成功率" width="120">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" :content="prograssMsg(scope.row)" placement="top">
            <el-progress v-if="!doStatus(scope.row,true).state" :status="doStatus(scope.row,true).string" :percentage="doStatus(scope.row,true).zyNumber"></el-progress>
            <el-progress v-else :percentage="doStatus(scope.row,true).zyNumber"></el-progress>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="耗时" width="80px" show-overflow-tooltip>
        <template slot-scope="scope">{{$millisecond(scope.row.endTime - scope.row.startTime)}}</template>
      </el-table-column>
      <el-table-column prop="concurrentCount" label="并发数" width="80px"></el-table-column>
    </el-table>
    <div class="pager">
      <el-pagination
        @size-change="sizeChange"
        @current-change="currentChange"
        :current-page="1"
        :page-size="10"
        layout="total, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  export default {
    name: "HistoryList",
    props: ["url", "itId"],
    data() {
      return{
        loading: true,
        dataList: [],
        query: {
          pageNum: 1,
          pageSize: 10,
          itId: this.itId
        },
        total: 0
      }
    },
    created() {
      this.initData();
    },
    methods: {
      /**初始化方法**/
      initData() {
        this.axios.get(this.url, {
          params: this.query
        }).then(rsp => {
          this.dataList = rsp.data.data.list;
          this.total = rsp.data.data.total;
          setTimeout(() => {
            this.loading = false;
            // this.$refs.singleTable.setCurrentRow(this.dataList[0]);
            // this.rowClick(this.dataList[0])
          }, 500);
        });
      },

      /*进行进度条的状态展示的选择的方法*/
      doStatus(item,type) {
        let total , alltotal, state;
        if(!type){
          total = item.lastTestSuccessInterfaceTotal;
          alltotal = item.lastTestInterfaceTotal;
          state = item.lastTestStatus;
        }else {
          total = item.successTotal;
          alltotal = item.total;
          state = item.status;
        }


        /*通过比对两个值进行展示结果的显示*/
        /*不纯在或者为null的时候就为0*/
        // let keyReturn = false;
        // if (total === null || alltotal === null) {
        //   keyReturn = true;
        // }

        // if(keyReturn){
        //   this.$message.error("配置参数异常，请联系管理员！");
        //   return false;
        // }

        if (total === null ) {
          total = 0
        }

        if (alltotal === null || alltotal == 0) {
          alltotal = 1
        }


        let number = parseInt((total / alltotal) * 100);
        let backString = "", myState = false;
        switch (state) {
          case '0':
            /*执行中*/
            myState = true;
            break;
          case '1':
            /*执行成功*/
            backString = "success";
            break;
          case '2':
            /*执行失败*/
            backString = "exception";
            break;
        }

        return {
          state: myState,
          zyNumber: number,
          string: backString
        }
      },
      prograssMsg(row){
        return row.successTotal+"/"+row.total
      },
      /**改变显示条数**/
      sizeChange(val) {
        this.query.pageSize = val;
        this.initData();
      },
      /**改变页数**/
      currentChange(val) {
        this.query.pageNum = val;
        this.initData();
      },
      /**点击每行**/
      rowClick(row) {
        this.$emit("rowClickCall", row);
      }
    }
  }
</script>

<style>
  .row-cursor{
    cursor: pointer;
  }
</style>
<style scoped>
  .pager{
    position: relative;
    padding: 10px 0 10px 10px;
  }
</style>
